<template>
  <div class="MiddleBox">
    <div class="img">
      <img src="@/assets/ElectricalDistribution/SX-hrss/20250409102828.jpg" alt="">
    </div>
    <div class="yuedu">
      <div class="title">月度能耗对比</div>
      <div class="load" ref="loadrefs"></div>
    </div>
  </div>
</template>
<script>
import {getmonthduibiapi} from '@/api/ElectricalDistribution/SX-hrss'
import * as echarts from 'echarts';
import { GetEcharts } from '@/utils/echarts'
import { autoHover } from "@/utils/publicmethods/tooltip";
export default {
  name: 'CallPoliceMiddlebox',

  data() {
    return {
      
    };
  },

  mounted() {
    this.getloadech()
  },

  methods: {
    async getloadech() {
      const { data: { list } } = await getmonthduibiapi({ subburo: '88000341' })
      const timePoints = list.find(ele => ele.datalist.length)?.datalist.map(item => item.timeReading)
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.3)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top:'7%',
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data:  timePoints,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            splitLine: {
              // 网格线
              lineStyle: {
                type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                color: "#333",
              },
              show: true, // 隐藏或显示
            },
          },
        ],

        series: [
          {
            name: "用电量",
            color: "#fff",
            type: "bar",
            barWidth: "60%",
            data: list.find(ele=>ele.name=='用电量').datalist.map(ele=>ele.valueReading) ,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#1394f0", // 指0%处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0d1f37", // 指100%处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            name: "年基准用电量",
            type: "line",
            symbolSize: "0",
            smooth: true,
            data:  list.find(ele=>ele.name=='年基准用电量').datalist.map(ele=>ele.valueReading) ,
            itemStyle: {
              color: "#bea811",
            },
          },
        ],
      }
      GetEcharts(this, this.$refs.loadrefs, option)
      autoHover(echarts.init(this.$refs.loadrefs), option, 12, 3000,false)
    }
  },
};
</script>
<style lang="scss" scoped>
.MiddleBox{
  width: 100%;
  height: 100%;
  .img, img{
    width: 100%;
    height: 710px;
  }
  .yuedu{
    margin-top: 20px;
    .title {
      height: 40px;
      color: #fff;
      line-height: 40px;
      background: linear-gradient(to right, #0b528a, #070e27) center center no-repeat;
      padding-left: 10px;
    }
    .load{
      height: 170px;
    }
  }
}
::v-deep ::-webkit-scrollbar {
    display: none;
}
</style>